<template>
  <div>
    <el-card>
      <h1 slot="header">护工信息列表</h1>
      <el-button type="primary" @click="openAddDialog" style="margin-bottom: 20px">添加护工</el-button>
      <el-table :data="elders" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="80" fixed></el-table-column>
        <el-table-column prop="gender" label="性别" width="80"></el-table-column>
        <el-table-column prop="birth_date" label="生日" width="140"></el-table-column>
        <el-table-column prop="phone_number" label="电话号码" width="140"></el-table-column>
        <el-table-column prop="email" label="邮件" width="140"></el-table-column>
        <el-table-column prop="address" label="地址" width="140"></el-table-column>
        <el-table-column prop="employment_date" label="入职日期" width="140"></el-table-column>
        <el-table-column prop="status" label="账户状态"  width="140"></el-table-column>
        <el-table-column prop="created_at" label="账户创建日期"  width="220"></el-table-column>
        <el-table-column prop="updated_at" label="上次登录" width="220"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加弹窗 -->
    <el-dialog v-model="addDialogVisible" title="添加护工">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.gender"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.birth_date" style="width: 100%;"></el-date-picker>
<!--          <el-input v-model="form.birth_date"></el-input>-->
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone_number"></el-input>
        </el-form-item>
        <el-form-item label="邮件">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.employment_date" style="width: 100%;"></el-date-picker>
<!--          <el-input v-model="form.employment_date"></el-input>-->
        </el-form-item>
        <el-form-item label="账户状态">
<!--          <el-input v-model="form.status"></el-input>-->
          <el-select v-model="form.status" placeholder="请选择活动区域">
            <el-option label="上班" value="Active"></el-option>
            <el-option label="休假" value="Holiday"></el-option>
            <el-option label="注销" value="Close"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </span>
    </el-dialog>

    <!-- 编辑老人弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑护工信息">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.gender"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.birth_date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone_number"></el-input>
        </el-form-item>
        <el-form-item label="邮件">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="入职日期">
<!--          <el-input v-model="form.employment_date"></el-input>-->
          <el-date-picker type="date" placeholder="选择日期" v-model="form.employment_date" style="width: 100%;"></el-date-picker>

        </el-form-item>
        <el-form-item label="账户状态">
<!--          <el-input v-model="form.status"></el-input>-->
          <el-select v-model="form.status" placeholder="请选择活动区域">
            <el-option label="上班" value="Active"></el-option>
            <el-option label="休假" value="Holiday"></el-option>
            <el-option label="注销" value="inactive"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { addCare, deleteCare, modifyCare, showCare } from '@/api/InforManage';
import {ElMessage} from "element-plus";

interface Elder {
  id: number,
  name: string,
  gender: string,
  birth_date: Date,
  phone_number: string,
  email: string,
  address: string,
  employment_date: string,
  status: string,
  created_at: Date,
  updated_at: Date
}

interface Id {
  id:string,
}

const Id = ref<Id[]>([]);
const elders = ref<Elder[]>([]);
const form = reactive<Elder>({
  id:"",
  name: "",
  gender: "Female",
  birth_date: "",
  phone_number: "",
  email: "",
  address: "",
  employment_date: "2024-06-01",
  status: "Active",
  created_at: "",
  updated_at: ""
});


const addDialogVisible = ref(false);
const editDialogVisible = ref(false);

const fetchCare = async () => {
  try {
    const response = await showCare();
    if (response.data.respCode === '000000') {
      elders.value = response.data.list;
    } else {
      console.error('Error fetching elders:', response.data.respMsg);
    }
  } catch (error) {
    console.error('Error fetching elders:', error);
  }
};

const openAddDialog = () => {
  console.log('openAddDialog called');
  Object.assign(form, {
    name: "",
    gender: "Female",
    birth_date: "2000-01-01",
    phone_number: "",
    email: "",
    address: "",
    employment_date: "2024-06-01",
    status: "Active",
    created_at: "",
    updated_at: ""
  });
  addDialogVisible.value = true;
};

const openEditDialog = (elder: Elder) => {
  console.log('openEditDialog called with elder:', elder);
  Object.assign(form, elder);
  editDialogVisible.value = true;
};

const handleAdd = async () => {
  try {
    await addCare(form);
    await fetchCare();
    addDialogVisible.value = false;
    ElMessage.success('添加成功');
  } catch (error) {
    console.error('Error adding elder:', error);
  }
};

const handleEdit = async () => {
  try {
    await modifyCare(form);
    await fetchCare();
    editDialogVisible.value = false;
    ElMessage.success('编辑成功');
  } catch (error) {
    console.error('Error modifying elder:', error);
  }
};

const obj = {"id":""};
const handleDelete = async (id: string) => {
  try {
    obj.id = id;
    await deleteCare(obj);
    await fetchCare();
  } catch (error) {
    console.error('Error deleting elder:', error);
  }
};

onMounted(() => {
  fetchCare();
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>
